// 定义路由表
// 传递的es6引入方式,会让所有的路由组件以上来就都加载到内存中
// import Home from './pages/Home'
// import About from './pages/About'
// import News from './pages/News'
// import Message from './pages/Message'
// import Detail from './pages/Detail'

// 利用React中提供的懒加载技术.加载组件.当组件需要new的时候,才去加载组件
import React from 'react'
// const Home = React.lazy(() => {
//   return import('./pages/Home')
// })
//简写:
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Detail = React.lazy(() => import('./pages/Detail'))
export default [
  {
    path: '',
    element: <Home></Home>,
  },
  {
    path: 'home',
    element: <Home></Home>,
    children: [
      {
        path: 'news',
        element: <News></News>,
      },
      {
        path: 'message',
        element: <Message></Message>,
        children: [
          {
            path: 'detail/:id',
            element: <Detail></Detail>,
          },
        ],
      },
    ],
  },
  {
    path: 'about',
    element: <About></About>,
  },
]
